// 登录页校验，验证当前用户是否登录
checkLogin()
// 登录鉴权
// interceptors()

// 退出功能
document.querySelector('#logout').addEventListener('click', function () {
    showToast('正在退出！！！')
    localStorage.removeItem('token')
    setInterval(() => {
        location.href = './login.html'
    }, 1000)
})

renderUsername()
// 更新用户名
function renderUsername() {
    const username = localStorage.getItem('username')
    document.querySelector('.username').innerHTML = username
}


// 获取表单数据渲染页面
function getData() {
    axios({
        url: '/students',
    }).then((res) => {
        console.log(res);
        const content = res.data.map(item => {
            return `
                <tr>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender === 0 ? '女' : '男'}</td>
                    <td>第${item.group}组</td>
                    <td>${item.hope_salary}</td>
                    <td>${item.salary}</td>
                    <td>${item.province + item.city + item.area}</td>
                    <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id = ${item.id}></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id = ${item.id}></i></a>
                    </td>
                </tr>
            `
        }).join('')
        // 更新页面内容
        document.querySelector('.list').innerHTML = content
        // 更改学员数量
        document.querySelector('.total').innerText = res.data.length
    })
}

getData()
// 添加数据
// 首先点击添加按钮展示弹层
const openModal = document.querySelector('#openModal')
openModal.addEventListener('click', function () {
    // 阻止表单默认行为
    // e.preventDefault()
    // 实例化弹层
    const modalDom = document.querySelector('#modal')
    const modal = new bootstrap.Modal(modalDom)
    modalDom.querySelector('.modal-title').innerText = '添加学员'
    modal.show()
})


// 获取省市区
async function getRegion() {
    // 获取元素
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')

    // 省
    axios({
        url: '/api/province'
    }).then(res => {
        console.log(res);

        province.innerHTML = `<option>--省份--</option>` + res.list.map(item => `<option>${item}</option>`).join('')
    })
    province.addEventListener('change', function () {
        // 市
        axios({
            url: '/api/city',
            params: {
                pname: this.value
            }
        }).then(res => {
            console.log(res);

            city.innerHTML = `<option>--城市--</option>` + res.list.map(item => `<option>${item}</option>`).join('')
            city.style.display = 'inline-block'
        })
    })
    city.addEventListener('change', function () {
        // 区
        axios({
            url: '/api/area',
            params: {
                pname: province.value,
                cname: this.value
            }
        }).then(res => {
            area.innerHTML = `<option>--地区--</option>` + res.list.map(item => `<option>${item}</option>`).join('')
            area.style.display = 'inline-block'
        })
    })
}

getRegion()

// 点击确认渲染到页面
const btnBlue = document.querySelector('.btn-blue')
btnBlue.addEventListener('click', function () {
    // 收集表单数据
    const form = document.querySelector('#form')
    const formData = serialize(form, { hash: true, empty: true })

    // 类型转换
    formData.age = +formData.age
    formData.gender = +formData.gender
    formData.hope_salary = +formData.hope_salary
    formData.salary = +formData.salary
    formData.group = +formData.group

    // 数据校验
    // const flag = Object.values(formData).every(item => item.trim().length < 0)

    // 提交

    const response = axios.post('/students', formData)
    showToast('添加成功')
    getData()

    // 关闭弹层
    document.querySelector('#modal').style.display = 'none'
    document.querySelector('.modal-backdrop').style.display = 'none'

    // 表单重置
    // document.querySelector('#form').reset()

})

// 删除数据
const tbody = document.querySelector('.list')
tbody.addEventListener('click', function (e) {
    // 阻止表单默认行为
    // e.preventDefault()
    // 实例化弹层
    // className 是一个字符串属性，适合获取或完全替换元素的所有类名，但它不提供任何方法来单独操作类名。
    // classList.contains 是 classList 对象的一个方法，用于检查元素是否有某个特定的类名，并且 classList 提供了一组丰富的 API 来方便地管理类名，而不会影响到其他类名。
    if (e.target.classList.contains('bi-trash')) {
        // 删除数据
        console.log('删除');
        if (confirm('是否确认删除')) {
            axios({
                url: `/students/${e.target.dataset.id}`,
                method: 'DELETE'
            }).then((res) => {
                getData()
                showToast('删除成功')
            })
        }
    } else if (e.target.classList.contains('bi-pen')) {
        // 编辑数据
        const modalDom = document.querySelector('#modal')
        const modal = new bootstrap.Modal(modalDom)
        modalDom.querySelector('.modal-title').innerText = '修改学员'
        modal.show()

        // 调用接口并回填数据
        axios({
            url: `/students/${e.target.dataset.id}`
        }).then((res) => {
            // document.querySelector('.edit-form .id').value = e.target.dataset.id
            const result = res.data
            console.log(res.data);

            const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
            keyArr.forEach(key => {
                document.querySelector(`[name=${key}]`).value = res.data[key]
            })

            const { gender } = res.data
            const chks = document.querySelectorAll('[name=gender]')
            chks[gender].checked = true
        })
    }

})
